<template>
  <div>
    <h1>水果店</h1>
    <h2>{{ sg }}</h2>
    <h2>请输入您需要购买的斤数<input type="text" v-model.lazy="sl" /></h2>
    <button @click="fn">结账</button>
    <h2 v-if="sl">
      结账，总价{{ zj }}元，折扣后{{ zkh }}元，共优惠了{{ yh }}元
    </h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sg: "苹果10元/一斤，折扣8折",
      sl: "",
      zj: "",
      zkh: "",
      yh: "",
    };
  },
  methods: {
    fn() {
      this.zj = this.sl * 10;
      this.zkh = this.sl * 8;
      this.yh = this.sl * 2;
    },
  },
};
</script>

<style scoped lang="less">
div {
  text-align: center;
  margin: 0 auto;
  width: 800px;
  height: 200px;
  // background-color: pink;
}
</style>
